<template>
    <div>
        <el-row type="flex" justify="center">
            <el-col :span="14">
                <div class="dataTable">
                    <h1>index</h1>
                    <!-- 使用插件表达式获取 登录用户的名称 -->
                    <h2>欢迎您:{{user.ename}}</h2>

                    <el-table
                            :data="emps"
                            border
                            stripe
                            style="width: 100%">
                        <!-- 遍历设置 表格的每个属性prop和标题label -->
                        <!-- 属性和数据的绑定 :prop 和循环里面的col的值可以动态绑定 -->
                        <el-table-column v-for="(col,i) in cols" :key="i"
                                         :prop="col.prop"
                                         :label="col.label"
                                         width="100">
                        </el-table-column>
                        <!-- 操作按钮 -->
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                        <!--                <el-table-column-->
                        <!--                        prop="eno"-->
                        <!--                        label="员工编号"-->
                        <!--                        width="180">-->
                        <!--                </el-table-column>-->
                        <!--                <el-table-column-->
                        <!--                        prop="ename"-->
                        <!--                        label="姓名"-->
                        <!--                        width="180">-->
                        <!--                </el-table-column>-->
                    </el-table>
                    <!--

                     :current-page 设置当前页面 使用自己设置page属性
                      @size-change="handleSizeChange"  pageSize
                            改变时会触发的事件默认会传递一个参数为改变的每页显示行数
                      @current-change="handleCurrentChange"  currentPage
                            改变时会触发的事件默认会传递一个参数为点击的下一页上一页 页数的页码
                     -->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="limit"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-row type="flex">
            <el-col>
                <!--
                :visible.sync="dialogFormVisible"
                通过dialogFormVisible属性的值来设置是否显示这个
                表单,true 为显示 ,false 为隐藏
                -->
                <el-dialog title="修改员工数据" :visible.sync="dialogFormVisible">
                    <el-form :model="form" label-position="right">
                        <el-form-item label="员工编号" :label-width="formLabelWidth">
                            <el-input v-model="form.eno" disabled autocomplete="off" class="inputForm"></el-input>
                        </el-form-item>
                        <el-form-item label="员工姓名" :label-width="formLabelWidth">
                            <el-input v-model="form.ename" autocomplete="off" class="inputForm"></el-input>
                        </el-form-item>
                        <el-form-item label="员工姓名" :label-width="formLabelWidth">
                            <el-radio v-model="form.esex" label="男">男</el-radio>
                            <el-radio v-model="form.esex" label="女">女</el-radio>
                        </el-form-item>
                        <el-form-item label="员工工资" :label-width="formLabelWidth">
                            <el-input type="number" v-model="form.salary" autocomplete="off"
                                      class="inputForm"></el-input>
                        </el-form-item>
                        <el-form-item label="员工密码" :label-width="formLabelWidth">
                            <el-input v-model="form.pwd" autocomplete="off" class="inputForm"></el-input>
                        </el-form-item>
                        <el-form-item label="出生日期" :label-width="formLabelWidth">
                            <el-date-picker
                                    v-model="form.bornDate"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="部门" :label-width="formLabelWidth">
                            <el-select v-model="form.dno" placeholder="请选择">
                                <el-option
                                        v-for="dept in deptList"
                                        :key="dept.dno"
                                        :label="dept.dname"
                                        :value="dept.dno">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="subUpdateEmp">确 定</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Qs from 'qs';

    export default {
        name: "Index",
        data() {
            return {
                user: this.$store.getters.getUser,//获取登录用户保存的状态数据
                emps: [],//设置用于提供表格数据数组对象
                cols: [ //设置对象数据 用于保存 表格的属性和标题使用
                    {prop: "eno", label: "员工编号"}, //设置表格想的属性和标题
                    {prop: "ename", label: "员工姓名"},
                    {prop: "esex", label: "员工性别"},
                    {prop: "salary", label: "员工工资"},
                    {prop: "pwd", label: "员工密码"},
                    {prop: "bornDate", label: "出生日期"},
                    {prop: "dname", label: "部门名"}
                    // {prop: "dno", label: "部门编号"}
                ],
                page: 1,//当前页码
                limit: 10,//每页显示行数
                total: 0,//数据总条数
                dialogFormVisible: false,
                formLabelWidth: "120px",//设置表单项的宽度
                form: { //设置表单相关的属性数据
                    eno: 0,
                    ename: "",
                    esex: "",
                    salary: 0,
                    pwd: "",
                    bornDate: null,
                    dno: 0
                },
                deptList: []//用于保存获取的dept数据
            }
        },
        methods: {
            getEmpList() {
                //axions 获取数据
                let vm = this;
                vm.$axios({
                    method: "get",
                    url: "http://localhost:8081/emp/getAllByPage?page=" + vm.page + "&limit=" + vm.limit
                }).then(function (response) {
                    //获取服务器响应的数据
                    console.log(response);
                    let data = response.data.list;//records获取跟叶工具中的数据集合(mybatis-plus) list是pageHelper的数据集合
                    console.log(data);
                    //赋值数据给表格对象
                    vm.emps = data;
                    //设置分页数据
                    vm.page = response.data.pageNum;//
                    vm.total = response.data.total;//
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                //把要显示的行数赋值给limit
                this.limit = val;
                //调用获取数据的函数
                this.getEmpList();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                //把要去的页面赋值给page
                this.page = val;
                //调用获取数据的函数
                this.getEmpList();
            },
            handleEdit(index, row) {
                //index 数据所在行的下标
                //row 点击的哪一行的数据对象  可以通过属性名点击获取参数
                console.log(index + "---" + row.ename);
                //修改数据属性为true,表单显示出来
                this.dialogFormVisible = true;
                //执行获取dept数据
                this.getDeptList();
                //把所在行的数据赋值给form 表单数据上
                this.form.eno = row.eno;
                this.form.ename = row.ename;
                this.form.esex = row.esex;
                this.form.pwd = row.pwd;
                this.form.salary = row.salary;
                this.form.bornDate = row.bornDate;
                this.form.dno = row.dno;
            },
            handleDelete(index, row) {
                console.log(index + "---" + row);
                //确认框
                this.$confirm('是否删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {//确认执行函数
                    //通过axios进行发送请求删除数据
                    let vm = this;
                    vm.$axios({
                        method: "get",
                        url: "http://localhost:8081/emp/del/" + row.eno  //获取点击当前行的eno属性的值
                    }).then(function (response) {
                        //获取服务器的响应
                        let data = response.data;
                        //判断是否成功
                        if (data != null && data == "success") {
                            vm.$message({
                                message: '删除成功1秒后刷新数据',
                                type: 'success'
                            });
                            //删除完成就重新获取数据
                            setTimeout(function () {
                                vm.getEmpList();
                            }, 1500)
                        } else {
                            vm.$message.error('错了哦，这是一条错误消息');
                        }
                    })
                }).catch(() => {//取消执行函数
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            getDeptList() {
                let vm = this;
                vm.$axios({
                    method: "get",
                    url: "http://localhost:8081/dept/getAll"
                }).then(function (response) {
                    //获取服务器影响数据
                    vm.deptList = response.data;
                })
            },
            subUpdateEmp() {
                //提交修改员工数据的函数方法
                //设置变量
                let vm = this;
                vm.$axios({
                    method: "post",
                    url: "http://localhost:8081/emp/update",
                    transformRequest: [
                        function (data) {
                            return Qs.stringify(data);
                        }
                    ],
                    data: {//设置要提交修改的数据
                        eno: this.form.eno,
                        ename: this.form.ename,
                        esex: this.form.esex,
                        pwd: this.form.pwd,
                        salary: this.form.salary,
                        bornDate: this.form.bornDate,
                        dno: this.form.dno
                    }
                }).then(function (response) {
                    //获取服务器响应数据
                    let data = response.data;
                    if (data != null && data == "success") {
                        vm.$message({
                            message: '修改成功1秒后刷新数据',
                            type: 'success'
                        });
                        setTimeout(function () {
                            //重新获取数据表格
                            vm.getEmpList();
                            //关闭修改的关闭框
                            vm.dialogFormVisible = false;
                        },1500)
                    }else{
                        vm.$message.error('修改失败请稍后再试或联系管理员');
                    }
                })
            }
        },
        created() {
            this.getEmpList();
        }
    }
</script>

<style scoped>
    .dataTable {
        /*width: 9000px;*/
        /*margin: 20px auto;*/
    }

    .inputForm {
        width: 220px;
    }
</style>